<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-19 16:42:55
 * @LastEditTime: 2024-06-21 13:57:05
-->
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { PopoverAvatar } from '@/components/Avatar';
import { useStore } from '@/plugins/pinia/index';
import { WarningFilled } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import router from '@/plugins/router/index';
import { $t } from '@/plugins/i18n/index';

import EditPwdDialog from './modules/edit-password.vue';
const { userInfo } = storeToRefs(useStore());
const { removeToken } = useStore();
const logout = () => {
    ElMessageBox.confirm($t(`title.confirmOut`), $t(`title.warning`), {
        confirmButtonText: $t(`button.confirm`),
        cancelButtonText: $t(`button.cancel`),
        type: 'warning',
        draggable: true,
        customClass: 'custom-message-box'
    }).then(async () => {
        await removeToken();
        router.push('/login');
    });
};
</script>
<template>
    <PopoverAvatar :src="userInfo.avatar" :name="userInfo.nickname">
        <div class="supplement between-space-justify">
            <EditPwdDialog :mode="userInfo" />
            <el-button link size="small" :icon="WarningFilled" @click="logout">{{ $t(`button.logout`) }}</el-button>
        </div>
    </PopoverAvatar>
</template>
<style lang="scss">
.custom-message-box {
    margin-bottom: 30%;
}
</style>
